<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>资料补充</title>
    <link rel="stylesheet" href="/assets/css/recruit.css?{:rand()}">
    <link rel="stylesheet" href="/assets/css/new.css">
    <link rel="stylesheet" type="text/css" href="/assets/css/icon.css">
    <style>
       /* .icon-cuowu {
            display: inline-block;
            color: white;
            font-size: 0.25rem;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }*/
    </style>
    <script src="/assets/js/jquery-1.10.2.min.js"></script>
    <script>
        $(function(){
            set_html_width();
            $(window).resize(function(){
                set_html_width();
            });
        });
        function set_html_width(){
            ww = $(window).width();

            $('html').css('font-size',ww/750*100);
        }
    </script>

</head>
<body>
<form action="{:url('recruit/supplementSub')}" method="post" enctype="multipart/form-data">
    <div class="box">

        <div class="box-row">
            <div class="left-row">
                报名资料上传
            </div>
            <div class="right-row">
                <div class="info-img">
                    <article class="upload-piclist">
                        <div class="upload-file">
                            <input type="file" name="means[]" class="file" accept="image/*" multiple />
                        </div>
                        {volist name="info.means" id="vo"}
                        <div class="upload-Picitem">
                            <input type="hidden" name="old[]" value="{$vo}">
                            <img src="{$vo}" alt="pic"><span class="remove" data-id="2" onclick="removeImg(this)"><i class="iconfont icon-cuowu"></i></span>
                        </div>
                        {/volist}

                    </article>
                </div>
            </div>
        </div>
        <input type="hidden" name="id" value="{$info.id}">
        <div class="box-row">
            <div class="left-row">
                学校
            </div>
            <div class="right-row">
                <input type="text" name="school" placeholder="请输入您的学校" value="{$info.school}">
            </div>
        </div>
        <div class="box-row">
            <div class="left-row">
                专业
            </div>
            <div class="right-row">
                <input type="text" name="professional" placeholder="请输入您的专业" value="{$info.professional}">
            </div>
        </div>
        <div class="box-row">
            <div class="left-row">
                层次
            </div>
            <div class="right-row">
                <input type="text" name="arrangement" placeholder="请输入层次" value="{$info.arrangement}">
            </div>
        </div>
        <div class="box-row">
            <div class="left-row">
                年级
            </div>
            <div class="right-row">
                <input type="text" name="grade" placeholder="请输入年级" value="{$info.grade}">
            </div>
        </div>
        <div class="box-row">
            <div class="left-row">
                标准学费
            </div>
            <div class="right-row">
                <input type="number" name="standard_tuition" placeholder="请输入标准学费" value="{$info.standard_tuition}">
            </div>
        </div>
        <div class="box-row">
            <div class="left-row">
                优惠加分政策：
            </div>
            <div class="right-row">
                <input type="text" name="bmzc" placeholder="请输入优惠加分政策" value="{$info.bmzc}">
            </div>
        </div>
        <div class="box-row">
            <div class="left-row">
                形式
            </div>
            <div class="right-row">
                <select name="xingshi" >
                    <option value="0">请选择</option>
                    <option value="1" {if condition="$info.xingshi eq 1"} selected{/if}>函授</option>
                    <option value="2" {if condition="$info.xingshi eq 2"} selected{/if}>国开</option>
                </select>
            </div>
        </div>

        <div class="box-row" style="align-items: unset">
            <div class="left-row">
                备注说明：
            </div>
            <div class="right-row">
                <textarea  name="other_content" cols="30" style="background: #f5f6fa;padding-left:0.3rem;"  rows="10">{$info.other_content}</textarea>
            </div>
        </div>
        <button class="tj-btn">提交</button>
    </div>
</form>
<div id="outerdiv" style="position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.7); z-index: 2; width: 100%; height: 100%; display: none;">
    <div id="innerdiv" style="position: absolute;">
        <img id="bigimg" style="border: 5px solid #fff;" src="" />
    </div>
</div>


</body>
<script>
    let picmax = 3; //限制上传数量
    $(document).on("change",".file",function () {
        let file = $(this).prop('files');

        let imglist =$(this).parent(".upload-file").nextAll(".upload-Picitem");
        let piclist = $(this).parent(".upload-file").parent(".upload-piclist");
        let filelist = file.length + imglist.length > picmax ? 3 - imglist.length : file.length + imglist.length;
        if (file.length + imglist.length >= 3) {
            $(this).parent(".upload-file").hide();
        }
        for (let i = 0; i < filelist; i++) {
            readerfile(file[i]).then(e => {
                let html = document.createElement('div');
                html.className = 'upload-Picitem'
                html.innerHTML = '<img src=' + e + ' alt="pic">' +
                    '<span class="remove" data-id="2" onclick="removeImg(this)">' +
                    '<i class="iconfont icon-cuowu"></i>' +
                    '</span>'
                piclist.append(html);
            })
        }
    })
    function removeImg(obj){
        $(obj).parent(".upload-Picitem").siblings(".upload-file").show();
        $(obj).parent(".upload-Picitem").remove();
    }
    function readerfile(file) {
        return new Promise((resolve, reject) => {
            let reader = new FileReader();
            reader.addEventListener("load", function() {
                resolve(reader.result);
            }, false)
            if (file) {
                reader.readAsDataURL(file)
            }
        })
    }
    $("#news-add").on("click",function () {
        var html = "<div  class=\"info-box1 info\" contenteditable placeholder=\"内容\"></div>\n" +
            "<div class=\"info-img\">\n" +
            "    <article class=\"upload-piclist\">\n" +
            "        <div class=\"upload-file\">\n" +
            "            <input type=\"file\"  class=\"file\" accept=\"image/*\" multiple />\n" +
            "        </div>\n" +
            "    </article>\n" +
            "</div>"
        $("#news").append(html);
    })
    function showLoading(){
        $(".loading-box").show();
        $(".loading").show();
        $("body").css("overflow","hidden")
    }
    //提交
    function submit() {
        let title = $("#title").html();
        if (title == null || title ==''){
            hsycms.tips('tips',"请输入标题",function(){
            },2000);
            return false;
        }
        let info = $(".info:eq(0)").html();
        if (info == null || info ==''){
            hsycms.tips('tips',"请输入内容",function(){
            },2000);
            return false;
        }
        let list = []
        let piclist = document.querySelectorAll('.info-img');
        for (let i = 0; i < piclist.length; i++) {
            let list2 =[];
            let list1 = $(".upload-piclist:eq("+i+")").children(".upload-Picitem");
            let imglist=[]
            for (let j = 0; j < list1.length; j++) {
                imglist.push($(".upload-piclist:eq("+i+")").children(".upload-Picitem:eq("+j+")").children("img").attr("src"))
            }
            var info1 =$(".info:eq("+i+")").html();
            list2.push(info1,imglist);
            list.push(list2);
        }
        var pid = $("#pid").val();
        var tid = $("#tid").val();
        var aid = $("#aid").val();
        $.ajax({
            type:'post',
            dataType:'json',
            url:"{:url('car/addNews')}",
            data:{title:title,list:JSON.stringify(list),pid:pid,tid:tid,aid:aid},
            traditional: true,//这里设置为true
            timeout: 10000,          // 设置超时时间
            beforeSend:function (){
                showLoading();
            },
            success:function(data){
                $(".loading-box").hide();
                $(".loading").hide();
                $("body").css("overflow","auto")
                if (data.status == 200){
                    if (data.state == 1){
                        hsycms.tips('tips',data.msg,function(){
                            window.location.href="{:url('car/newsPage')}?aid="+aid;
                        },2000);
                    }else{
                        hsycms.tips('tips',data.msg,function(){
                            window.location.href="{:url('car/index')}"
                        },2000);
                    }

                }else {
                    hsycms.tips('tips',data.msg,function(){
                    },2000);
                }
            }
        })

    }
    //textarea高度自适应
    var autoTextarea = function(elem, extra, maxHeight) {
        extra = extra || 0;
        var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
            isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
            addEvent = function(type, callback) {
                elem.addEventListener ?
                    elem.addEventListener(type, callback, false) :
                    elem.attachEvent('on' + type, callback);
            },
            getStyle = elem.currentStyle ? function(name) {
                var val = elem.currentStyle[name];

                if (name === 'height' && val.search(/px/i) !== 1) {
                    var rect = elem.getBoundingClientRect();
                    return rect.bottom - rect.top -
                        parseFloat(getStyle('paddingTop')) -
                        parseFloat(getStyle('paddingBottom')) + 'px';
                };

                return val;
            } : function(name) {
                return getComputedStyle(elem, null)[name];
            },
            minHeight = parseFloat(getStyle('height'));

        elem.style.resize = 'none';

        var change = function() {
            var scrollTop, height,
                padding = 0,
                style = elem.style;

            if (elem._length === elem.value.length) return;
            elem._length = elem.value.length;

            if (!isFirefox && !isOpera) {
                padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
            };
            scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

            elem.style.height = minHeight + 'px';
            if (elem.scrollHeight > minHeight) {
                if (maxHeight && elem.scrollHeight > maxHeight) {
                    height = maxHeight - padding;
                    style.overflowY = 'auto';
                } else {
                    height = elem.scrollHeight - padding;
                    style.overflowY = 'hidden';
                };
                style.height = height + extra + 'px';
                scrollTop += parseInt(style.height) - elem.currHeight;
                document.body.scrollTop = scrollTop;
                document.documentElement.scrollTop = scrollTop;
                elem.currHeight = parseInt(style.height);
            };
        };

        // addEvent('propertychange', change);
        // addEvent('input', change);
        // addEvent('focus', change);
        change();
    };
    $("#plate").on("click",function () {
        $("#plate-list").html("")
        $(".plate-box").slideDown();
        $("body").css("overflow","hidden");
        $("#type").val("1");
        list1(1);
    })
    $("#topic").on("click",function () {
        $("#plate-list").html("")
        $(".plate-box").slideDown();
        $("body").css("overflow","hidden");
        $("#type").val("2");
        list1(2);
    })
    function guan(){
        $("#plate-list").html("")
        $(".plate-box").slideUp();
        $("body").css("overflow","auto")
        $("#plate-search").val("");
        $("#type").val("");
    }
    $("#guanbi").on("click",function () {
        guan();
    })
    $('#plate-search').on('keyup',function(e){
        var keycode = e.keyCode;
        var type = $("#type").val();
        if(keycode==13) {
            list1(type);
        }
    })
    $(document).on("click",".plate-name",function () {
        var name = $(this).html();
        var id= $(this).data("id");
        var type = $("#type").val();
        if (type == 1){
            $("#pid").val(id);
            $("#pname").html(name)
        }else {
            $("#tid").val(id);
            var text = "#"+name+"#&nbsp;&nbsp;";
            $("#info").append(text)
        }
        guan();
    })
    function list1(type) {
        layui.use('flow', function () {
            var flow = layui.flow;
            var $ = layui.jquery;
            $("#plate-list").html("")
            var search = $("#plate-search").val();
            flow.load({
                elem: '#plate-list' //流加载容器
                , isAuto: true     //自动加载  为true的时候是自动加载
                , isLazyimg: true   //图片懒加载
                , done: function (page, next) { //加载下一页
                    $.post(
                        "{:url('car/plateList')}",
                        {page: page, type: type,search:search},
                        function (d) {
                            var lis = [];
                            layui.each(d.res, function (index, item) {  //遍历后台传过来的数据
                                lis.push(" <li class=\"plate-name\" data-id=\""+item.id+"\">\n" +
                                    "            "+item.name+"\n" +
                                    "        </li>")
                            });
                            next(lis.join(''), page < d.total_page);  //拼接成字符串
                        }
                    );
                }
            });
        });
    }

    $(function () {
        $(".file-btn").on("change",function () {
            console.log(window.URL.createObjectURL($('.file-btn')[0].files[0]));
            $(".img-box").show();
            //$(".file-btn").hide();
            // $(".file-btn1").hide();
            $("#devImgShow").attr('src', window.URL.createObjectURL($('.file-btn')[0].files[0]));
        })




    })
    function Big(obj) {
        imgShow("#outerdiv", "#innerdiv", "#bigimg", obj);
    }


    function imgShow(outerdiv, innerdiv, bigimg, _this) {
        var src = _this.src;//获取当前点击的pimg元素中的src属性
        $(bigimg).attr("src", src);//设置#bigimg元素的src属性

        /*获取当前点击图片的真实大小，并显示弹出层及大图*/
        $("<img/>").attr("src", src).load(function () {
            var windowW = $(window).width();
            var windowH = $(window).height();
            var realWidth = this.width;
            var realHeight = this.height;
            var imgWidth, imgHeight;
            var scale = 0.8;

            if (realHeight > windowH * scale) {
                imgHeight = windowH * scale;
                imgWidth = imgHeight / realHeight * realWidth;
                if (imgWidth > windowW * scale) {
                    imgWidth = windowW * scale;
                }
            } else if (realWidth > windowW * scale) {
                imgWidth = windowW * scale;
                imgHeight = imgWidth / realWidth * realHeight;
            } else {
                imgWidth = realWidth;
                imgHeight = realHeight;
            }
            $(bigimg).css("width", imgWidth);

            var w = (windowW - imgWidth) / 2;
            var h = (windowH - imgHeight) / 2;
            $(innerdiv).css({ "top": h, "left": w });
            $(outerdiv).fadeIn("fast");
        });

        $(outerdiv).click(function () {
            $(this).fadeOut("fast");
        });
    }
</script>
</html>